// 会员管理---会员标签管理
import './index.scss';
import {Button, Col, Form, Input, Row,Modal} from "antd";
import React,{useEffect,useState} from 'react';
import {
    FormOutlined,
    CloseCircleOutlined
} from '@ant-design/icons';
import store from "../../../store";
import {observer} from 'mobx-react';

const MemberLabelManagement=()=>{
    const [form] = Form.useForm();
    const onFinish = (values) => {
        //模糊搜索请求
        store.memberLabell.getLabelMohu(values.inptval)
        // console.log(values)
        console.log(values.inptval)
    };

    // 模态框初始开闭状态
    const  [isaddModalOpen,setaddModalOpen]=useState(false)
    const  [isEditModalOpen,setisEditModalOpen]=useState(false)
    const  [isDeletModalOpen,setisDeletModalOpen]=useState(false)
    //编辑标签的input的value值
    // const [editval,seteditval]=useState("")
    //添加标签的input的value值
    const [addval,addsetval]=useState("")
    //当前选中的标签
    const [checkLabel,setCheckLabel]=useState({id:'',tagName:''})

    // 添加标签-模态框
    const addshowModal=()=>{
        setaddModalOpen(true);
    }
    //添加输入框的input值
    const addchange=(ev)=>{
        // console.log(addval)
        addsetval(ev.target.value)
    }
    //添加模态框-确认
    const addhandleOk = () => {
        console.log(addval)
        store.memberLabell.memberAddLabel(addval)
        setaddModalOpen(false);
    };
    //添加模态框-取消
    const addhandleCancel = () => {
        setaddModalOpen(false);
    };

    //编辑标签-模态框
    const EditshowModal=(v)=>{
        setCheckLabel(v);
        console.log(v.id,v.tagName)
        setisEditModalOpen(true);
    }
    //编辑标签的input的value值-值改变
    const inputeditChange=(inptv)=>{
        console.log(checkLabel)
        let _checkLabel={...checkLabel}
        console.log(_checkLabel)
        //输入的值赋值给选中框的tagName的值
        _checkLabel.tagName=inptv.target.value
        setCheckLabel(_checkLabel)

    }
    //编辑模态框-确认
    const editOk = () => {
        store.memberLabell.editMemberLabel(checkLabel.id,checkLabel.tagName)
        setisEditModalOpen(false);

    };
    //编辑模态框-取消
    const editCancel = () => {
        setisEditModalOpen(false);
    };

    //删除标签-模态框
    const DeletshowModal=(v)=>{
        setCheckLabel(v) /*这里把v的属性和值都设置到了CheckLabel中，为了方便其他函数使用*/
        console.log(v.id,v.tagName)
        setisDeletModalOpen(true);
    }
    //删除模态框-确认
    const deletOk = () => {
        console.log(checkLabel)
        store.memberLabell.memberDelLabel(checkLabel.id)
        setisDeletModalOpen(false);
    };
    //删除模态框-取消
    const deletCancel = () => {
        setisDeletModalOpen(false);
    };

    useEffect(() => {
        if (store.memberLabell.memberLabelArr.length === 0) {
            store.memberLabell.getAllLabelList()
        }
    }, [])

    return (<div>
            {/*搜索表单部分*/}
            <div>
                <Form
                    form={form}
                    name="sousuo"
                    onFinish={onFinish}
                    className="sousou"
                >
                    <Form.Item
                        name="inptval"
                        label="标签名称"
                    >
                        <div>
                            <Input className="inpt"/>
                            <Button type="primary"
                                    htmlType="submit"
                                    className="soubtn"
                            >搜索</Button>
                        </div>
                    </Form.Item>
                    <Form.Item className="adddiv">
                            <Button onClick={addshowModal}  className="btn">添加</Button>
                            <Modal
                                title="添加标签"
                                open={isaddModalOpen}
                                onOk={addhandleOk}
                                okText={"确定"}
                                onCancel={addhandleCancel}
                                cancelText={"取消"}
                                maskClosable={false} /*点击不是对话框区域，是否允许关闭对话框*/
                            >
                                <Input value={addval} onChange={addchange}></Input>
                            </Modal>
                    </Form.Item>
                </Form>
            </div>

            {/*主体标签部分*/}
            <div>
                <Row gutter={[16, 24]} className="lableList">
                    <>{

                        store.memberLabell.memberLabelArr.map((v,i)=>{
                            return <Col span={4} key={i} className="gutter-row">
                                <div className="listdiv">
                                    {v.tagName}
                                    <div className="listicon">
                                        <FormOutlined className="edit" onClick={()=>EditshowModal(v)}/>
                                        <CloseCircleOutlined className="delet" onClick={()=>DeletshowModal(v)}/>
                                    </div>
                                </div>
                            </Col>
                        })
                    }</>

                    <Modal
                        title="编辑标签"
                        open={isEditModalOpen}
                        onOk={editOk}
                        okText={"确定"}
                        onCancel={editCancel}
                        cancelText={"取消"}
                        maskClosable={false} /*点击不是对话框区域，是否允许关闭对话框*/
                    >

                        <Input value={checkLabel.tagName}  onChange={inputeditChange}></Input>
                    </Modal>
                    <Modal
                        title="删除标签"
                        open={isDeletModalOpen}
                        onOk={deletOk}
                        okText={"确定"}
                        onCancel={deletCancel}
                        cancelText={"取消"}
                        maskClosable={false}
                    >
                        <p>确定删除该标签吗？</p>
                    </Modal>
                </Row>
            </div>

    </div>);
};


export default observer(MemberLabelManagement);